import React from 'react';
import { connect } from 'react-redux';
import CategoryTree  from '../category/CategoryTree' ;
import QuestionList from './QuestionList' ;
import { Layout,Breadcrumb,Button} from 'antd';
import { loadQuestions,deleteQuestions } from "../../../actions/questionActions" ;
import { Link } from 'react-router' ; 
const { Sider, Content } = Layout;

class QuestionPage extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            size: 'large',
            selectedRowKeys:[],
            pagination: { pageSize:10,current:1,},
            loading: false,
            data:[],
        }
    }

    componentDidMount(){
        this.fetchQuestion();
    }
    
    fetchQuestion = (category,pagination) => {
        this.setState({ loading: true });
        category = category || "0";
        pagination = pagination || {pageSize:11,current:1};
        this.props.loadQuestions(category,pagination.current,pagination.pageSize).then( (res) => {
            pagination.total = this.props.total;
            this.setState({
                loading: false,
                data:res.data.body.questions,
                pagination,
            });
        });
    }

    deleteQuestions = () => {   
        this.props.deleteQuestions(this.state.selectedRowKeys).then(
            (res) => { 
                if (res.data.code === 10200 ){
                    for (let i = 0 ; i < this.state.data.length; i++) {
                        for (let j = 0 ; j < this.state.selectedRowKeys.length;j++) {
                            if ( this.state.data[i].id === this.state.selectedRowKeys[j] ){
                                this.state.data.splice(i, 1);
                            }
                        }
                    }
                    this.setState({data:this.state.data});
                }
             }
        );
    }
    
    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    }

    onTreeSelect = (category) => {
        this.fetchQuestion(category);  
    }

    handleTableChange = (pagination, filters, sorter) => {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager,
        });
        this.fetchQuestion("0",pagination);   
    }

    render(){
        return (
                <Layout>
                    <Sider width={200} style={{ background: '#fff' }}>
                         <CategoryTree onSelect={this.onTreeSelect}/>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}> 
                            <Breadcrumb style={{ margin: '12px 0' }}>
                                <Breadcrumb.Item><Link to="/admin/questions/add" > add </Link></Breadcrumb.Item>
                                <Breadcrumb.Item><Button >  import </Button></Breadcrumb.Item>
                                <Breadcrumb.Item><Button >  export </Button></Breadcrumb.Item>
                            </Breadcrumb>  
                            <QuestionList 
                                sourceData={this.props.sourceData} 
                                count={this.props.total} 
                                handleTableChange={this.handleTableChange}
                                pagination={this.state.pagination}
                                loading={this.state.loading}
                                />
                         </Content>
                    </Layout>
                </Layout>
        )
    }
}

const mapStateToProps = (state) => {
  return {
    sourceData: state.question.questions,
    total:state.question.total,
   }
}

QuestionPage.propTypes = {
    loadQuestions:React.PropTypes.func.isRequired,
    deleteQuestions:React.PropTypes.func.isRequired,
};
export default connect(mapStateToProps,{loadQuestions,deleteQuestions})(QuestionPage);